<template>
	<div class="assistant-menu" :class='{showNav:shownav}'>
		<section>
			<div class="menu-header">
				<i class="navmenu" :class="shownav ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="nav"></i>
				<router-link class="assistant-title" to='/'>穷游行程助手</router-link>
			</div>
			<section class="section-box" :class='{sectionclose:isshowsection}'>
				<div class='push-login' :class='{loginisclose:isshowlogin}'>
					<router-link class='loginorregist' to=''>
						<i class="el-icon-user loginlogo"></i>
						点击登陆或注册,体验更多呦~
					</router-link>
					<i class="el-icon-circle-close close-login" @click='closelogin'></i>
				</div>
				<div class="planMsg">
					<img class="staticimg" src="../../assets/assistant/my_1.png" alt="">
					<div class="plantxt">
						<p>拿上别人的行程即刻出发；全程线路规划最短路线；</p>
						<p>导出PDF打印带上路，一键生成英文送签单；</p>
						<p>告别办公软件吧！</p>
					</div>
				</div>
				<div class="planadd">
					<i class="el-icon-plus"> 创建新的行程</i>
				</div>
				<div class="planInfo" @click='closesection'>
					<i class='el-icon-arrow-up'></i>
				</div>
			</section>
			<div class="info-userplan" v-if='isshowsection'>
				<ul>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
					<li>
						<div class="user-plan-img">
							<img class="plan-infoimg" src="../../assets/assistant/planimg1.jpg" alt="">
							<div class="plan-user-info">
								<img class='user-admin' src="../../assets/assistant/user.jpg" alt="">
								<span class='user-name'> &nbsp;皓月流光</span>
							</div>
							<div class="iinfo">
								<div class="days">
									<span>18</span>
									<span>天</span>
								</div>
								<div class="timeandinfo">
									<p>2019-07-03出发</p>
									<p>2019年暑假加拿大西线及西雅图自驾游</p>
								</div>
							</div>
						</div>
						<div class="user-plan-info">
							<span>购物</span><span>逛街</span>
							<p>上海 > 卡尔加里 > 班夫镇 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 库特内国家公园 > 班夫国家公园 > 班夫镇 > 班夫国家公园 > 幽鹤国家公园 > 班夫国家公园 > 贾斯珀国家公园 > 卡尔加里 > 温哥华 > 西雅图 > 温哥华 > 上海</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="btn-plan" v-if='isshowsection'>
				<router-link to='' class="call-cost">
					<i class="el-icon-chat-round"></i>
					联系客服
				</router-link>
				<router-link to='' class="add-plan-btn">
					<i class="el-icon-plus">创建新的行程</i>
				</router-link>
			</div>
			<div v-if="shownav" class="mask" @click="shrink"></div>
		</section>
	</div>

</template>


<script type="text/javascript">
    export default {
        name:'assistantMenu',
        data(){
        	return{
        		shownav:false,
        		isshowlogin:false,
        		isshowsection:false
        	}
        },
        methods:{
        	nav(){
        		this.shownav=!this.shownav
        		this.$emit("shownavs",this.shownav)
        		// console.log(this.shownav)
        	},
        	shrink(){
        		this.shownav=false;
        		this.$emit("shownavs",this.shownav)
        	},
        	closelogin(){
        		this.isshowlogin=true;
        		// console.log('test');
        	},
        	closesection(){
        		this.isshowsection=true;
        	}
        }
    }
</script>

<style type="text/css" scoped lang="less">
	.assistant-menu{
		position:absolute;
		width:100vw;
		overflow-x:hidden;
		left:0px;
		height:100vh;
		overflow-y:auto;
		transition:all 0.5s;
		section{
			height:100vh;
			position:absolute;
			width:100%;
			.menu-header{
				background-color:white;
				width:100%;
				height:44px;
				border-bottom:1px solid #e5e5e5;
				.navmenu{
					display: block;
					width:33%;
					float:left;
					margin-left: 0.5em;
					color:#2bab79;
					font-size:20px;
					height:44px;
					line-height: 44px;
				}
				.assistant-title{
					font-size:1.1em;
					display:inline-block;
					line-height: 44px;
				}
				
			}
			.section-box{
				overflow: hidden;
				background-color:#4ECC81;
				transition:all 0.5s;
				.push-login{
					width:100%;
					height:50px;
					overflow-y:hidden;
					transition:all 0.5s;
					background-color: #E7FFF0;
					position:relative;
					.loginorregist{
						display:block;
						height:50px;
						line-height:50px;
						color:#41C074;
						text-align: center;
						.loginlogo{
							font-size:1.5em;
						}
					}
					.close-login{
						line-height: 50px;
						display:block;
						position:absolute;
						font-size:20px;
						color:#41C074;
						right:10px;
						top:0px;
					}
				}
				.loginisclose{
					height:0;
				}
				.planMsg{
					background-color: #41C074;
					text-align:center;
					position:relative;
					.staticimg{
						position:relative;
						padding-top:5em;
						width:70%;
					}
					.plantxt{
						position:absolute;
						top:8em;
						width:100vw;
						p{
							font-size:0.8em;
							color:white;
							margin:2px 0;
						}
					}
				}
				.planadd{
					position:absolute;
					left:20%;
					width:60%;
					text-align:center;
					height:4em;
					line-height: 4em;
					border-radius:5px;
					background-color:white;
					bottom:7em;
					color:#41C074;
				}
				.planInfo{
					width:100vw;
					height:3.5em;
					line-height: 3.5em;
					text-align:center;
					position:absolute;
					bottom:2em;
					font-size:18px;
					color:#E6aaa0;
				}
			}
			.info-userplan{
				overflow-y:auto;
				height:100%;
				padding-top:5px;
				background-color:#eee;
				ul{
					list-style:none;
					margin:0;
					padding:0;
					li{
						margin-bottom: 5px;
						background-color: white;;
						.user-plan-img{
							position:relative;
							width:100%;
							.plan-user-info{
								position:absolute;
								top:5px;
								left:5px;
								display:flex;
								align-items:center;
								.user-admin{
									width:25px;
									height:25px;
									border-radius:12.5px;
								}
								.user-name{
									display:inline-block;
									color:white;
									line-height: 25px;
								}
							}
							.plan-infoimg{
								width:100%;
							}
							.iinfo{
								width:100%;
								padding:5px;
								position:absolute;
								// border:1px solid black;
								background-color:rgba(0,0,0,0.4);
								color:white;
								bottom:2px;
								display:flex;
								flex-direction: row;
								flex-wrap:nowrap;
								align-items:center;
								.days{
									padding-right:0.8em;
									border-right:2px solid white;
									white-space:nowrap;
									span:first-child{
										font-size:2.3em;
									}
									span:last-child{
										font-size:1em;
									}
								}
								.timeandinfo{
									padding-left:0.8em;
									overflow: hidden;
									p{
										margin:0;
										font-size:1.2em;
										white-space:nowrap;
										overflow: hidden;
									}
									p:first-child{
										font-size:0.7em;
										color:#eee;
									}
								}
							}
						}
						.user-plan-info{
							padding:0 15px;
							span{
								display:inline-block;
								padding:2px 5px;
								margin:3px;
								background-color: #f3f4f5;
								color:#9ea3ab;;
								border-radius:6px;
								font-size:0.8em;
							}
							p{
								font-size:0.9em;
								padding:2px 0;
								margin:0;
								white-space:normal;
								overflow: hidden;
								display:-webkit-box;
								-webkit-line-clamp:2;
								-webkit-box-orient:vertical;
							}
						}
					}
				}
			}
			.btn-plan{
				height:50px;
				width:100%;
				background: #41C074;
				position:fixed;
				bottom:0px;
				display: flex;
				flex-direction:row;
				align-items:center;
				.call-cost{
					display:block;
					text-align: center;
					background: #E7FFF0;
					font-size:1em;
					padding:10px 0;
					color: #41c074;
					width:30%;
					i{
						display:block;
						text-align:center;
					}
				}
				.add-plan-btn{
					display:block;
					height:50px;
					line-height: 50px;
					width:70%;
					text-align:center;
					color:white;
				}
			}
			.sectionclose{
				height:0;
			}
			.mask{
				position:absolute;
				width:100vw;
				height:100%;
				overflow-y:auto;
				z-index: 100;
			}
		}
	}
	.showNav{
		left:250px;
	}
</style>
